<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 注意事项:
        先引入公共文件
        最后引入自己独立文件
    -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 网页布局 -->
    <div class="main_body">
        <!-- 左侧盒子 -->
        <div class="letfBox">

            <!-- 左侧第一个顶部盒子 -->
            <div class="left_topBox">
                <div class="item">
                    <h4>2190</h4>
                    <p>
                        <!-- 设置字体图标 -->
                        <span class="icon-dot"></span>
                        设备总数
                    </p>
                </div>
                <div class="item">
                     <h4>2190</h4>
                     <p>
                         <!-- 设置字体图标 -->
                         <span class="icon-dot"></span>
                         设备总数
                     </p>
                </div>
                <div class="item">
                      <h4>2190</h4>
                      <p>
                          <!-- 设置字体图标 -->
                          <span class="icon-dot"></span>
                          设备总数
                      </p>
                </div>
                <div class="item">
                       <h4>2190</h4>
                       <p>
                           <!-- 设置字体图标 -->
                           <span class="icon-dot"></span>
                           设备总数
                       </p>
                </div>
            </div>


            <!-- 左侧第二个盒子 -->
            <div class="left_topBox2">
                <!-- 顶部标题 -->
                <div class="title">
                    <a href="javascript:;" data-msg="list1">故障设备监控</a>
                    <div class="line"></div>
                    <a href="javascript:;" class="active" data-msg="list2">异常设备监控</a>
                </div>

                <!-- 提示标题 -->
                <div class="tips_title">
                    <div class="itme">故障时间</div>
                    <div class="itme">设备地址</div>
                    <div class="itme">异常代码</div>
                </div>

                <!-- 内容列表区域 -->
                <div class="content">
                    <ul class="list1" style="display: none">
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>

                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                    </ul>

                    <ul class="list2">
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                    </ul>
                </div>
                
            </div>

            <!-- 左侧最后一个底部盒子 -->
            <div class="left_botBOx">
                <!-- 顶部标题盒子 -->
                <div class="title">
                    点位分布统计
                </div>

                <!-- 内容盒子 -->
                <div class="content">
                    <!-- 饼状图 -->
                    <div class="left_pieBox" id="left_pieBox"></div>

                    <!-- 信息展示盒子 -->
                    <div class="right_msgShow">
                        <div class="item">
                            <h4>320,11</h4>
                            <p>
                                <span class="icon-dot" style="color: #ed3f35"></span>
                                点位总数
                            </p>
                        </div>

                        <div class="item">
                            <h4>320,11</h4>
                            <p>
                                <span class="icon-dot" style="color: #eacf19"></span>
                                本月新增
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 中间盒子 -->
        <div class="middleBox">

            <!-- 第一个标题盒子 -->
            <div class="title">
                <span class="icon-cube"></span>
                设备数据统计
            </div>

            <!-- 第二个地图盒子 -->
            <div class="map" id="map"></div>


            <!-- 第三个柱状图 -->
            <div class="bot_boxBar">
                 <!-- 标题 -->
                 <div class="title">全国用户总量统计</div>
                 <!-- 内容区域 -->
                 <div class="content">
                     <!-- 左侧柱状图 -->
                     <div class="leftBar" id="leftBar"></div>
                     <!-- 右侧信息展示 -->
                     <div class="right_msg">
                          <div class="item">
                              <h4>320,11</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35"></span>
                                  点位总数
                              </p>
                          </div>

                          <div class="item">
                              <h4>320,11</h4>
                              <p>
                                  <span class="icon-dot" style="color: #eacf19"></span>
                                  本月新增
                              </p>
                          </div>
                     </div>
                 </div>
            </div>
        </div>

        <!-- 右边盒子 -->
        <div class="rightBox">

            <!-- 右侧第一个盒子 -->
            <div class="right_top1Box">
                 <!-- 顶部标题 -->
                 <div class="title">
                     <a href="javascript:;" class="active" data-msg="year">365天</a>
                     <div class="line"></div>
                     <a href="javascript:;"  data-msg="jd">90天</a>
                     <div class="line"></div>
                     <a href="javascript:;" data-msg="month">30天</a>
                     <div class="line"></div>
                     <a href="javascript:;" data-msg="day">24小时</a>
                 </div>

                 <!-- 底部内容 -->
                 <div class="content">
                     <div class="item" id="year">
                         <div class="leftitem">
                             <h4>1,987</h4>
                             <p>
                                 <span class="icon-dot" style="color: #ed3f35;"></span>
                                 订单量
                             </p>
                         </div>
                         <div class="rightitem">
                              <h4>2,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #e4c918"></span>
                                  销售额(万元)
                              </p>
                         </div>
                     </div>
                     <div class="item" id="jd" style="display: none;">
                          <div class="leftitem">
                              <h4>4,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35;"></span>
                                  订单量
                              </p>
                          </div>
                          <div class="rightitem">
                              <h4>6,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #e4c918"></span>
                                  销售额(万元)
                              </p>
                          </div>
                     </div>
 
                     <div class="item" id="month" style="display: none;">
                           <div class="leftitem">
                               <h4>8,987</h4>
                               <p>
                                   <span class="icon-dot" style="color: #ed3f35;"></span>
                                   订单量
                               </p>
                           </div>
                           <div class="rightitem">
                               <h4>9,987</h4>
                               <p>
                                   <span class="icon-dot" style="color: #e4c918"></span>
                                   销售额(万元)
                               </p>
                           </div>
                     </div>

                     <div class="item" id="day" style="display: none;">
                            <div class="leftitem">
                                <h4>2,987</h4>
                                <p>
                                    <span class="icon-dot" style="color: #ed3f35;"></span>
                                    订单量
                                </p>
                            </div>
                            <div class="rightitem">
                                <h4>5,987</h4>
                                <p>
                                    <span class="icon-dot" style="color: #e4c918"></span>
                                    销售额(万元)
                                </p>
                            </div>
                     </div>
                 </div>
            </div>

            <!-- 右侧第二个盒子 -->
            <div class="right_top2Box">
                 <!-- 标题区域 -->
                 <div class="title">
                     <strong>销售统计</strong>
                     <div class="line"></div>
                     <a href="javascript:;" class="active" data-msg="year">年</a>
                     <a href="javascript:;" data-msg="quarter">季</a>
                     <a href="javascript:;" data-msg="month">月</a>
                     <a href="javascript:;" data-msg="week">周</a>
                 </div>

                 <!-- 内容折线图区域 -->
                 <div class="content">
                      <!-- 折线图 -->
                      <div class="lineBox" id="lineBox"></div>
                 </div>
            </div>

            <!-- 右侧第三个盒子 -->
            <div class="right_top3Box">
                <!-- 左侧盒子 -->
                <div class="leftBox_">
                    <!-- 标题 -->
                    <div class="public_title">
                        渠道分布
                    </div>
                    <div class="content">

                        <div class="topitem">
                            <div class="leftItem_">
                                <h4>39%</h4>
                                <p>
                                    <span class="icon-plane"></span>
                                    机场
                                </p>
                            </div>
                            <div class="rithtItem_">
                                <h4>28%</h4>
                                <p>
                                    <span class="icon-bag"></span>
                                    商场
                                </p>
                            </div>
                        </div>

                        <div class="topitem">
                            <div class="leftItem_">
                                <h4>39%</h4>
                                <p>
                                    <span class="icon-plane"></span>
                                    机场
                                </p>
                            </div>
                            <div class="rithtItem_">
                                <h4>28%</h4>
                                <p>
                                    <span class="icon-bag"></span>
                                    商场
                                </p>
                            </div>
                        </div>

                    </div>

                </div>

                <!-- 右侧盒子 -->
                <div class="rightBox_">
                    <!-- 标题 -->
                    <div class="public_title">
                        一季度销售进度
                    </div>

                    <!-- 饼状统计图 -->
                    <div class="bot_pie" id="bot_pie"></div>

                    <!-- 数字展示 -->
                    <div class="numb_show">
                         75%
                    </div>

                    <!-- 底部内容区域 -->
                    <div class="bot_box">
                        <div class="topitem">
                            <div class="leftItem_">
                                <h4>39%</h4>
                                <p>
                                    <span class="icon-plane"></span>
                                    机场
                                </p>
                            </div>
                            <div class="rithtItem_">
                                <h4>28%</h4>
                                <p>
                                    <span class="icon-bag"></span>
                                    商场
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 右侧最后一个盒子 -->
            <div class="right_lastBox">
                 <!-- 标题 -->
                 <div class="title">
                     <span>全国热榜</span>
                     <span>各省热销</span>
                     <span>//近30日//</span>
                 </div>
                 <!-- 内容区域 -->
                 <div class="content">
                     <!-- 左侧第一个列表 -->
                     <div class="left_listBox">
                         <div class="items">
                             <span class="icon-cup1" style="color: #ed3f35;"></span>
                             可爱多
                         </div>
                         <div class="items">
                             <span class="icon-cup2" style="color: #68d8fe;"></span>
                             可爱多
                         </div>
                         <div class="items">
                              <span class="icon-cup3" style="color: #4c9bfd;"></span>
                              可爱多
                         </div>
                     </div>

                     <!-- 中间列表盒子 -->
                     <div class="middle_listBox">
                         <div class="items">
                             <span>北京</span>
                             <span>12345</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>北京</span>
                             <span>12345</span>
                             <span class="icon-down"></span>
                         </div>
                         <div class="items">
                             <span>北京</span>
                             <span>12345</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>北京</span>
                             <span>12345</span>
                             <span class="icon-down"></span>
                         </div>
                         <div class="items">
                              <span>北京</span>
                              <span>12345</span>
                              <span class="icon-down"></span>
                         </div>
                     </div>

                     <!-- 右侧盒子 -->
                     <div class="right_listBox">
                         <div class="items">
                             <span>可乐</span>
                             <span>1234</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>可乐</span>
                             <span>1234</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>可乐</span>
                             <span>1234</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>可乐</span>
                             <span>1234</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>可乐</span>
                             <span>1234</span>
                             <span class="icon-up"></span>
                         </div>
                         <div class="items">
                             <span>可乐</span>
                             <span>1234</span>
                             <span class="icon-up"></span>
                         </div>
                     </div>
                 </div>
            </div>
        

        </div>
    </div>
    
    <!-- 引入js文件 -->
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/shipei.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>